<template>
  <div v-loading="loading" class="dealEvent none-info">
    <ul class="legend">
      <li v-for="(event, index) in eventList" :key="event.dictValue" @click="eventClick(index,event)">
        <i :style="{'background':event.remark }" />{{ $t(event.dictLabel) }}
      </li>
    </ul>
    <div v-if="total > 0" v-infinite-scroll="load" :infinite-scroll-distance="10" class="overAuto" :style="{height:height}">
      <el-timeline>
        <template v-for="(item, index) in listDealEvent">
          <el-timeline-item
            v-show="showType.includes(item.type)"
            :key="index"
            :type="item.type"
            :color="item.color"
          >
            <h4 @click="openComponent(item)">
              <span v-if="item.typeLanguageCode">{{ $t(item.typeLanguageCode) }}：</span>
              <span v-if="item.titleLanguage === 'Y'" v-html="$t(item.title)" />
              <span v-else v-html="item.title" />
            </h4>
            <p v-if="item.dealEventContentList && item.dealEventContentList.length > 0">
              <span v-for="(v, index) in item.dealEventContentList" :key="index" style="display: block;">
                {{ $t(v.languageCode) }}：
                <span v-if="v.dataLanguage === 'Y'" v-html="v.data" />
                <span v-else v-html="v.data" />
              </span>
            </p>
            <p>
              <router-link
                v-if="dealId === ''"
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:item.dealId, companyId:item.companyId}}"
                class="link_a dealName"
              >{{ item.dealName }}</router-link>
              {{ parseTime(item.time) }}
            </p>

          </el-timeline-item>
        </template>
      </el-timeline>

    </div>

    <!--    <el-pagination-->
    <!--      v-show="total > 1"-->
    <!--      small-->
    <!--      layout="prev, pager, next"-->
    <!--      :page-size="30"-->
    <!--      :total="total"-->
    <!--      @current-change="handleCurrentChange"-->
    <!--    />-->
    <div v-if="total === 0" class="noneData">
      <div>
        <svg-icon v-if="!empty" icon-class="none" class-name="none-icon" />
        <span v-else class="el-icon-brush" style="font-size: 25px;color: #606266;" />
        <p>{{ $t('暂无数据') }}</p>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="formOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false" append-to-body custom-class="dialogForm">
      <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
      <component :is="FormPath" ref="FormPath" />
    </el-dialog>

    <el-dialog :visible.sync="actFormOpen" :title="title" custom-class="dialogForm" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>
  </div>

</template>
<script>
import { listDealEvent } from '@/api/deal/event/dealEvent'
import { getAsyncComponent } from '@/utils'
import ProcessInfoForm from '@/views/act/process/processInfoForm'
export default {
  components: {
    ProcessInfoForm
  },
  props: {
    dealId: {
      type: String,
      default: () => ''
    },
    empty: {
      type: Boolean,
      default: () => false
    },
    year: {
      type: String,
      required: false,
      default: undefined
    },
    quarter: {
      type: String,
      required: false,
      default: undefined
    },
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listDealEvent: [],
      loading: false,
      eventList: [],
      colorList: [],
      showType: [],
      isActive: '',
      total: null,
      FormPath: '',
      title: '',
      formOpen: false,
      actFormOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        dealId: '',
        queryType: []
      },
      dataId: '',
      flag: false
    }
  },
  computed: {
    isOnchange({ dealId, year, quarter }) {
      return { dealId, year, quarter }
    }
  },
  watch: {
    isOnchange: {
      handler(val) {
        console.log(val)
        this.queryParams.dealId = val.dealId
        this.queryParams.year = val.year
        this.queryParams.quarter = val.quarter
        this.getList()
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getDicts('deal_event_type').then(response => {
      this.eventList = response.data
      this.eventList.forEach(item => {
        this.$set(item, 'on', false)
        this.colorList.push(item.remark)
        this.showType.push(item.dictValue)
      })
    })
  },
  mounted() {
    this.loadComponent()
    this.$bus.$emit('async_done')
  },
  methods: {
    load() {
      var pageNum = this.queryParams.pageNum
      var pageSize = this.queryParams.pageSize
      var total = this.total
      var calcPageNum = Math.ceil(total / pageSize)
      if (pageNum < calcPageNum) {
        this.queryParams.pageNum = pageNum + 1
        this.getList()
      }
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    // 事件列表
    getList() {
      console.log(this.queryParams.pageNum, '页数')
      this.loading = true
      if (this.dealId) {
        this.queryParams.dealId = this.dealId
      }
      listDealEvent(this.queryParams).then(res => {
        if (!this.listDealEvent || !(this.listDealEvent instanceof Array)) {
          this.$set(this, 'listDealEvent', [])
        }
        // this.listDealEvent = res.rows
        this.total = res.total
        this.loading = false
        res.rows.findIndex(item => {
          this.eventList.findIndex(color => {
            if (item.type === color.dictValue) {
               this.$set(item, 'color', color.remark)
            }
          })
        })
        if (this.queryParams.pageNum === 1) {
          this.listDealEvent = res.rows
        } else {
          this.listDealEvent = this.listDealEvent.concat(res.rows)
        }
      })
    },
    // title弹出地址
    openComponent(data) {
      console.log('项目最新事件：', data)
      this.title = data.title.replaceAll('&nbsp;', ' ')
      this.dataId = data.dataId
      if (data.component === '@/views/act/process/processInfoForm') {
        this.actFormOpen = true
        this.$nextTick(function() {
          var proData = {}
          proData.actId = this.dataId
          this.$refs.processInfoForm.init(proData)
        })
      } else {
        this.formOpen = true
        this.importFormPath(data.component)
      }
    },
    // 引入组件
    importFormPath(path) {
      console.log('path', path)
      this.FormPath = getAsyncComponent(path)
    },
    // 加载组件
    loadComponent() {
      this.$bus.$on('async_done', () => {
        this.$nextTick(() => {
            var data = {}
            data.id = this.dataId
            if (this.$refs.FormPath?.init !== undefined) {
              this.$refs.FormPath.init(data)
              this.$refs.FormPath.dealEvent = 'dealEvent'
            }
        })
      })
    },
    eventClick(index, data) {
      // 每次点击任意一个标签. 都从第一页开始查
      this.queryParams.pageNum = 1
      this.total = 0
      if (this.flag === false) {
        this.eventList.forEach(item => {
          this.$set(item, 'remark', '')
        })
        this.flag = true
        this.showType = []
        this.showType.push(data.dictValue)
        this.$set(data, 'remark', this.colorList[index])
        this.$set(data, 'on', true)
      } else {
        if (data.on === true) {
          // 隐藏当前事件
          const index = this.showType.findIndex(ele => {
            return ele === data.dictValue
          })
          if (index > -1) {
            this.showType.splice(index, 1)
          }
          this.$set(data, 'remark', '')
          this.$set(data, 'on', false)
        } else {
          // 展示当前事件
          this.showType.unshift(data.dictValue)
          this.$set(data, 'remark', this.colorList[index])
          this.$set(data, 'on', true)
        }
      }
      this.queryParams.queryType = this.showType
      if (this.showType.length > 0) {
        this.getList()
      }
    }
  }
}
</script>
